<template>
    <div>
        <!-- 1、面包屑导航 -->
        <div class="title" style="margin-top:20px;margin-left:20px;margin-bottom: 20px;">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>参数管理</el-breadcrumb-item>
                <el-breadcrumb-item>分类管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="params">
            <div class="block" v-loading="loading">
                <el-tree :data="data" node-key="id" :expand-on-click-node="false">
                    <span class="custom-tree-node" slot-scope="{ node, data }">
                        <span>{{ node.label }}</span>
                        <span>
                            <i v-if="node.level!=1" @click="() => editNode(node,data)" class="el-icon-edit"
                                title="编辑"></i>
                            <!--编辑节点-->
                            <i @click="() => appendNode(node, data)" class="el-icon-plus" title="添加子类"
                                style="margin:0 10px;"></i>
                            <i v-if="node.level!=1" @click="() => removeNode(node,data)" class="el-icon-delete"
                                title="删除"></i>
                            <!--删除节点-->
                        </span>
                    </span>
                </el-tree>
            </div>
            <el-dialog :title="title" :visible.sync="dialogFormVisible" width="30%" @open='openDialog'
                @close='closeDialog'>
                <div>
                    <el-input v-model="labelValue" placeholder="请输入分类名"></el-input>
                </div>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="CancelSub">取 消</el-button>
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                </div>
            </el-dialog>
        </div>

    </div>

</template>

<script>
export default {
    data() {
        return {
            getParent: [],
            type: '',
            node: [],
            nodeData: [],
            dialogFormVisible: false,
            title: '',
            labelValue: '',
            data: [],
            loading: false
        }
    },
    created() {
        this.getCate();

    },
    methods: {
        getCate() {
            this.loading = true
            this.$ajax({
                method: "get",
                url: "/api/getCategory",
            }).then(res => {
                this.data = JSON.parse(res.data.data)
            })
            setTimeout(() => {
                this.loading = false;
            }, 200);
        },
        editNode(node, data) {
            this.dialogFormVisible = true,
                this.title = '编辑分类',
                this.node = node;
            this.nodeData = data;
            this.type = 1;
        },
        appendNode(node, data) {
            this.dialogFormVisible = true,
                this.title = '添加分类'
            this.node = node;
            this.nodeData = data;
            this.type = 2;
        },
        //找到最上层的结点
        getTreeNode(node) {
            if (node) {
                if (node.parent.label !== undefined) {
                    this.getTreeNode(node.parent);
                } else {
                    this.getParent = node
                }
            }
        },
        removeNode(node, data) {
            this.getTreeNode(node)
            console.log('node:', this.getParent.data.id)
            let selectId = this.getParent.data.id
            const parent = node.parent;
            const children = parent.data.children || parent.data;
            const index = children.findIndex(d => d.id === data.id);
            children.splice(index, 1);
            console.log('data:', this.data)
            let result = this.data.filter(function (item) {
                return Number(item.id) == selectId
            })
            console.log('result:', JSON.stringify(result[0].children))
            this.$ajax({
                method: "post",
                url: "/api/removeCategory",
                params: { id: selectId, detail: JSON.stringify(result[0].children) }
            }).then(res => {
                console.log(res)
                if (Number(res.data.res_code) == 1) {
                    this.$message({
                        message: '删除成功！',
                        type: 'success'
                    })
                } else {
                    this.$message({
                        message: '删除失败！',
                        type: 'error'
                    })
                }
            })
        },
        CancelSub() {
            this.dialogFormVisible = false;
            this.labelValue = ''
        },
        submitForm() {
            if (this.type == 1) {//编辑
                if (this.labelValue) {
                    console.log('type=1')
                    this.getTreeNode(this.node)
                    let selectId = this.getParent.data.id
                    this.nodeData.label = this.labelValue;
                    let result = this.data.filter(function (item) {
                        return Number(item.id) == selectId
                    })
                    this.$ajax({
                        method: "post",
                        url: "/api/editorCategory",
                        params: { id: selectId, detail: JSON.stringify(result[0].children) }
                    }).then(res => {
                        if (Number(res.data.res_code) == 1) {
                            this.$message({
                                message: '修改成功！',
                                type: 'success'
                            })
                        } else {
                            this.$message({
                                message: '修改失败！',
                                type: 'error'
                            })
                        }
                    })
                    this.dialogFormVisible = false;
                } else {
                    this.$message({
                        message: '请输入分类名！',
                        type: 'error'
                    });
                }
            } else {
                if (this.labelValue) {//添加
                    this.getTreeNode(this.node)
                    console.log('node:', this.getParent.data.id)
                    let selectId = this.getParent.data.id
                    let newId = selectId
                    const newChild = { id: newId++, label: this.labelValue, children: [] };
                    if (!this.nodeData.children) {
                        this.$set(this.nodeData, 'children', []);
                    }
                    this.nodeData.children.push(newChild);
                    console.log('selectId:', selectId)
                    console.log('data:', JSON.parse(JSON.stringify(this.data)))
                    let result = this.data.filter(function (item) {
                        return Number(item.id) == selectId
                    })
                    console.log('result:', result)
                    this.$ajax({
                        method: "post",
                        url: "/api/addCategory",
                        params: { id: selectId, detail: JSON.stringify(result[0].children) }
                    }).then(res => {
                        if (Number(res.data.res_code) == 1) {
                            this.$message({
                                message: '添加成功！',
                                type: 'success'
                            })
                        } else {
                            this.$message({
                                message: '添加失败！',
                                type: 'error'
                            })
                        }
                    })
                    this.dialogFormVisible = false;
                } else {
                    this.$message({
                        message: '请输入分类名！',
                        type: 'error'
                    });
                }
            }
            this.labelValue = ''
        }
    }
}
</script>

<style lang="less" scoped>
.block {
    width: 30%;
    margin: 20px;
}

.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 18px;
    padding-right: 8px;
}

/deep/ .el-tree-node__content {
    height: 60px;
}
</style>